p5.js アニメーションと条件分岐

アニメーション

code: anima01.js

var y = 0.0;

function setup() {

createCanvas(400, 400);

background(0, 160, 200);

frameRate(60); // draw() の更新頻度。60fps = 1/60秒。数字が小さくなると動きがカクカクする。　

}

function draw() {

strokeWeight(10);

stroke(10, 200, 240);

line(y, 0, y, 400);

y = y + 1;

}

code: anima02.js

var y = 0.0;

function setup() {

createCanvas(400, 400);

background(0, 160, 200);

frameRate(60);

}

function draw() {

strokeWeight(10);

stroke(y/2, 200, 240);

line(400, y-400, y-400, 400);

y = y + 1;

}

条件分岐

code: anima03.js

var c = 0.0

var y = 0.0;

function setup() {

createCanvas(400, 400);

background(200);

frameRate(60);

}

function draw() {

strokeWeight(10);

stroke(c/2);

line(400, y-400, y-400, 400);

y = y + 2;

c = c + 3;

if (y > 800){ // yが800を超えたら...

y = 0;　// yを0に戻す

}

if (c > 255){ // cが255を超えたら...

c = 0; // cを0に戻す

}

}

参考文献

「Processingをはじめよう 第2版」

『Processing　ビジュアルデザイナーとアーティストのためのプログラミング入門』

https://gyazo.com/7a34570168e30c908bcf746c3c4a5e7a